<template>
  <div>
    <div v-if="!isProduct">
      <vm-title title="法人实名认证"
                :show-arrow="false"></vm-title>

      <div class="title-wrap"
           v-if="isAuth !== 0"
           @click="toggleUserAuth">
        <text class="icon"
              v-if="!userAuthShow">&#xe605;</text>
        <text class="icon"
              v-else>&#xe604;</text>
        <text>{{user.realName}} {{user.idCard}} {{isAuth === -1 ? '(审核中)' : ''}}</text>
      </div>

      <div class="bg-white px-3 pb-3 flex-row"
           v-if="userAuthShow">
        <image class="auth-img"
               v-for="(authImg, index) in userAuthImages"
               :key="index"
               :src="authImg"
               @click="imagePreview(userAuthImages, index)"></image>
      </div>

      <text class="empty"
            @click="goUserAuth"
            v-if="isAuth === 0">法人没有实名，去实名&gt;</text>

      <vm-title title="工商认证"
                :marginTop="true"
                :show-arrow="false"></vm-title>

      <div class="title-wrap"
           v-if="ic.registerNo">
        <text class="icon"
              v-if="!icShow">&#xe605;</text>
        <text class="icon"
              v-else>&#xe604;</text>
        <text @click="toggleIc"
              class="flex">{{ic.registerName}} 编号:{{ic.registerNo}}</text>
        <text class="icon icon-edit"
              @click="goIc">&#xe791;</text>
      </div>

      <div>
        <div class="bg-white px-3 pb-3 flex-row"
             v-if="icShow">
          <image class="ic-img"
                 v-for="(img, index) in icImages"
                 :key="index"
                 :src="img"
                 @click="imagePreview(icImages, index)"></image>
        </div>
      </div>

      <text class="empty"
            @click="goIc"
            v-if="!ic.registerNo">还没有工商认证，去添加&gt;</text>
    </div>

    <vm-title title="三品一标"
              :marginTop="true"
              :show-arrow="false"
              @rightClick="goCertificate(4)"
              right-text="添加">
      <text class="icon text-muted"
            slot="right">&#xe69f;</text>
    </vm-title>

    <div v-if="sp.length">
      <div v-for="(s, i) in sp"
           :key="i">
        <div class="title-wrap">
          <text class="icon"
                v-if="!s.imgShow">&#xe605;</text>
          <text class="icon"
                v-else>&#xe604;</text>
          <text @click="toggleShow(s)"
                class="flex">{{s.authorizedName}}</text>
          <text class="icon icon-edit"
                @click="goCertificate(4, s)">&#xe791;</text>
        </div>

        <div class="bg-white px-3 pb-3 flex-row"
             v-if="s.imgShow && s.authorizedImages">
          <image class="ic-img"
                 v-for="(img, index) in s.authorizedImages"
                 :key="index"
                 :src="img"
                 @click="imagePreview(s.authorizedImages, index)"></image>
        </div>
      </div>

    </div>

    <text class="empty"
          @click="goCertificate(4)"
          v-else>还没有三品一标认证，去添加&gt;</text>

    <vm-title title="质检报告"
              :marginTop="true"
              :show-arrow="false"
              @rightClick="goCertificate(3)"
              right-text="添加">
      <text class="icon text-muted"
            slot="right">&#xe69f;</text>
    </vm-title>

    <div v-if="zj.length">
      <div v-for="(s, i) in zj"
           :key="i">
        <div class="title-wrap">
          <text class="icon"
                v-if="!s.imgShow">&#xe605;</text>
          <text class="icon"
                v-else>&#xe604;</text>
          <text @click="toggleShow(s)"
                class="flex">{{s.authorizedName}}</text>
          <text class="icon icon-edit"
                @click="goCertificate(3, s)">&#xe791;</text>
        </div>

        <div class="bg-white px-3 pb-3 flex-row"
             v-if="s.imgShow && s.authorizedImages">
          <image class="ic-img"
                 v-for="(img, index) in s.authorizedImages"
                 :key="index"
                 :src="img"
                 @click="imagePreview(s.authorizedImages, index)"></image>
        </div>
      </div>

    </div>

    <text class="empty"
          @click="goCertificate(3)"
          v-else>还没有质检报告，去添加&gt;</text>

    <vm-title title="其他荣誉"
              :marginTop="true"
              :show-arrow="false"
              right-text="添加"
              @rightClick="goCertificate(10)">
      <text class="icon text-muted"
            slot="right">&#xe69f;</text>
    </vm-title>

    <div v-if="qt.length">
      <div v-for="(s, i) in qt"
           :key="i">
        <div class="title-wrap">
          <text class="icon"
                v-if="!s.imgShow">&#xe605;</text>
          <text class="icon"
                v-else>&#xe604;</text>
          <text @click="toggleShow(s)"
                class="flex">{{s.authorizedName}}</text>
          <text class="icon icon-edit"
                @click="goCertificate(10, s)">&#xe791;</text>
        </div>

        <div class="bg-white px-3 pb-3 flex-row"
             v-if="s.imgShow && s.authorizedImages">
          <image class="ic-img"
                 v-for="(img, index) in s.authorizedImages"
                 :key="index"
                 :src="img"
                 @click="imagePreview(s.authorizedImages, index)"></image>
        </div>
      </div>

    </div>

    <text class="empty"
          @click="goCertificate(10)"
          v-else>还没有其他荣誉，去添加&gt;</text>
  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmTitle from '../../components/vm-title.vue'
import {
  STORAGE_USER,
  STORAGE_FARM
} from '../../plugins/constant'

export default {
  components: { VmButton, VmTitle },
  props: {},
  data() {
    return {
      type: '',
      user: {},
      farm: {},
      // 实名认证
      userAuthShow: false,
      // 工商认证
      icShow: false,
      ic: {
        registerNo: '',
        registerName: ''
      },
      // 三品一标
      sp: [],
      // 质检
      zj: [],
      // 其他荣誉
      qt: []
    }
  },
  computed: {
    isAuth() {
      return +this.user.isAuth || 0
    },
    userAuthImages() {
      return this.user.idCardImg || []
    },
    icImages() {
      return this.ic.farmLicenseImg || []
    },
    isProduct() {
      return this.type === 'product'
    }
  },
  watch: {},
  eros: {
    beforeBackAppear(params) {
      if (!params) { return }
      switch (params.type) {
        case 1:
          this.getMe()
          break
        case 2:
          this.getIc()
          break
        case 3:
          this.getAuth()
          break
        default:
          break
      }
    }
  },
  created() {
    this.getFarm()
  },
  methods: {
    getFarm() {
      this.$router.getParams().then(res => {
        this.type = res && res.type || ''
      })

      this.user = this.$storage.getSync(STORAGE_USER) || {}
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      this.getAuth()
      this.getIc()
    },
    getMe() {
      this.$http({
        method: 'GET',
        name: 'auth.me'
      }).then(res => {
        this.user = res
        this.$storage.setSync(STORAGE_USER, res)
        this.$event.emit(EVENT_GET_USER, res)
      })
    },
    async getAuth() {
      const res = await this.$http({
        method: 'GET',
        name: 'industrial.authorized',
        data: {
          start: 1,
          size: 20,
          farmId: this.farm.id
        }
      })
      const data = res && res.data || []
      this.sp = []
      this.zj = []
      this.qt = []
      for (const item in data) {
        item.imgShow = false
        if ([4, 5, 6, 7].includes(item.authorizedType) > -1) {
          this.sp.push(item)
        } else if (item.authorizedType === 3) {
          this.zj.push(item)
        } else if (item.authorizedType === 10) {
          this.qt.push(item)
        }
      }
    },
    toggleUserAuth() {
      this.userAuthShow = !this.userAuthShow
    },
    imagePreview(images, index) {
      this.$image.preview({ index, images })
    },
    goUserAuth() {
      this.$nav.open({ name: 'user.realname' })
    },
    // 工商
    async getIc() {
      const res = await this.$http({
        method: 'GET',
        name: 'industrial.farm.ic',
        data: {
          farmId: this.farm.id
        }
      })
      this.ic = res || {}
    },
    toggleIc() {
      this.icShow = !this.icShow
    },
    goIc() {
      this.$nav.open({
        name: 'farm.ic',
        params: this.ic
      })
    },
    goCertificate(type) {
      this.$nav.open({
        name: 'farm.certificate',
        params: {
          type,
          data: {}
        }
      })
    },
    toggleShow(s) {
      s.imgShow = !s.imgShow
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.p-3 {
  padding: 30px;
}
.px-3 {
  padding-left: 30px;
  padding-right: 30px;
}
.pb-3 {
  padding-bottom: 30px;
}
.bg-white {
  background-color: #fff;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.text-center {
  text-align: center;
}
.text-muted {
  color: #999;
}
.title-wrap {
  flex-direction: row;
  padding: 25px;
  background-color: #fff;
}
.empty {
  padding: 30px;
  color: #999;
  font-size: 28px;
  text-align: center;
  background-color: #fff;
}

.auth-img {
  width: 230px;
  height: 180px;
  margin-left: 20px;
}
.ic-img {
  width: 180px;
  height: 180px;
  margin-left: 20px;
}
.icon-edit {
  padding-left: 15px;
  color: $accent;
}
</style>
